<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/stu_home.css">
    <link rel="stylesheet" type="text/css" href="/css/stu_home.css">
</head>

<body>
    <div id="vm">
        <div id="global"></div>
        <div class="mask" v-show="mask"></div>

        <div class="nav">
            <div class="back-home" @click="backHome">返回</div>
            <p>Hello,{{name}}</p>

            <div class="message" @click="showMessage">消息</div>
            <div class="log-out" @click="logOut">登出</div>
        </div>

        <div class="title">房源信息</div>

        <div class="info">
            <div class="card" v-for="(item, index) of lists" @click="showDetail(item)">
                <div class="pic">
                    <div class="inner">
                        <img :src="item.pics[0].url" alt="{{index}} + house">
                    </div>
                </div>
                <div class="type">
                    房源类型: {{item.type}}
                </div>
                <div class="address">
                    房源地址: {{item.location}}
                </div>
            </div>

            <div class="card more">. . .</div>
            <div class="blank"></div>
        </div>

        <div class="details" v-show="details">
            <div>
                <h1>房间详情</h1>
            </div>
            <div class="x" @click="close">×</div>
            <div class="detailPic">
                <div class="pic-title">房间图片</div>
                <div class="pic-content">
                    <div class="detailPicture" v-for="(item, index) of detailPic">
                        <img :src="item.url">
                    </div>
                </div>
            </div>
            <div class="detailType">房源类型:{{detailType}}</div>
            <div class="detailAddress">房源地址:{{detailAddress}}</div>
            <div class="detailDescription">房间描述:{{detailDescription}} 房间编号:{{detailID}}</div>
            <div class="hostPhone">房主电话:{{hostPhone}}</div>
            <div class="add-meet" @click="showMeet">请求会面</div>
        </div>

        <div class="meet-window" v-show="meetWindow">
            <div class="back" @click="closeM">返回</div>
            <div>
                <h1>房间预约</h1>
            </div>
            <div class="meet-time">
                <label>
                    <br /><br />
                    <p style="font-size: 22px">确认你要预约的房源的信息:</p>
                    <br /><br />
                    <div style="width: 80%; border: 1px solid rgba(0, 0, 0, .2); margin-left: 40px">
                        <div class="detailType">房源类型:{{detailType}}</div>
                        <div class="detailAddress">房源地址:{{detailAddress}}</div>
                        <div class="detailDescription">房间描述:{{detailDescription}} 房间编号:{{detailID}}</div>
                        <div class="hostPhone">房主电话:{{hostPhone}}</div>
                    </div>
                    <br /><br />
                    请求会面的时间:
                    <input type="date" v-model="meetDate">
                    <input type="time" v-model="meetTime">
                </label>
            </div>
            <div class="send-meet" @click="addMeet">发出请求</div>
        </div>

        <div class="message-window" v-show="messageWindow">
            <div class="x" @click="closeMe">×</div>
            <div class="message-item" v-if="messageLength>0?false:true">
                暂时没有待读的消息
            </div>
            <div class="message-item" v-for="(item, index) in message">
                <div class="message-content" @click="showDetailMessage(item)">
                    这是{{item.house.hostMan.id}}号房主,{{item.id}}号房子的相关消息:
                    {{item.desc}}
                </div>
                <div class="message-commit" @click="commitMessage">确认</div>
            </div>
        </div>

        <div class="message-detail" v-show="detailMessage">
            <div class="x" @click="closeDM">×</div>
            <h1>消息详情</h1>

            <div class="house-message">
                <h3>房间相关信息:</h3>
                <div>房间号:{{messageHouse.id}}</div>
                <div>房间类型:{{messageHouse.type}}</div>
                <div>房间地址:{{messageHouse.location}}</div>
                <div>房间描述:{{messageHouse.description}} </div>
            </div>

            <div class="host-message">
                <h3>房主相关信息:</h3>
                <div>房主号:{{messageHost.id}}</div>
            </div>

            <div class="message-content2">
                <h3>房主回复的内容:</h3>
                <div style="color: red; font-weight: 600">{{messageDesc}}</div>
            </div>

            <div class="message-commit2" @click="commitMessage">确认</div>
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#vm",
        data: {
            lists: [],
            details: false,
            mask: false,
            meetWindow: false,
            messageWindow: false,
            detailMessage: false,
            detailType: "",
            detailAddress: "",
            detailDescription: "",
            detailID: "",
            detailPic: [],
            hostPhone: "",
            username: "",
            houseId: "",
            meetTime: "",
            meetDate: "",
            message: [],
            messageLength: "",
            messageHouse: {},
            messageHost: {},
            messageDesc: "",
            name,
        },
        methods: {
            logOut: function () {
                axios({
                    method: 'post',
                    url: '/logout',
                })
                    .then(() => {
                        window.location.replace('/')
                    })
            },
            getRole: () => {
                axios({
                    method: 'post',
                    url: '/user/getRole'
                })
                    .then((res) => {
                        vm.username = res.data.data.username;
                        vm.name=res.data.data.name;
                    })
            },
            showDetail: function (item) {
                vm.details = true;
                vm.mask = true;
                vm.detailType = item.type;
                vm.detailAddress = item.location;
                vm.detailDescription = item.description;
                vm.detailPic = item.pics;
                vm.detailID = item.id;
                vm.hostPhone = item.hostMan.phone;
                document.documentElement.style.overflow = "hidden";
            },
            close: function () {
                vm.details = false;
                vm.mask = false;
                document.documentElement.style.overflow = "scroll";
            },
            closeM: function () {
                vm.meetWindow = false;
            },
            showMeet: function () {
                vm.meetWindow = true;
            },
            addMeet: function () {
                let date = new Date(Date.parse(vm.meetDate + ' ' + vm.meetTime));
                let time = date.getTime()
                axios({
                    method: 'post',
                    url: '/stu/addMeet',
                    data: {
                        houseID: vm.detailID,
                        datetime: time
                    }
                })
                    .then((res) => {
                        console.log(res);
                    })
                vm.meetWindow = false;
                vm.details = false;
                vm.mask = false;
                alert("请求发出成功.")
            },
            backHome: function () {
                window.location = "/user/home"
            },
            showMessage: function () {
                vm.mask = true;
                vm.messageWindow = true;
                document.documentElement.style.overflow = "hidden";
            },
            closeMe: function () {
                vm.mask = false;
                vm.messageWindow = false;
                document.documentElement.style.overflow = "scroll";
            },
            commitMessage: function () {
                console.log(1)
            },
            showDetailMessage: function (item) {
                vm.messageHouse = item.house;
                vm.messageHost = item.house.hostMan;
                vm.messageDesc = item.desc;
                vm.detailMessage = true;
                console.log(item)
            },
            closeDM: function () {
                vm.detailMessage = false;
            }
        },
        created: function () {
            this.getRole();

            axios({
                method: 'get',
                url: '/stu/gethouse',
            })
                .then((response) => {
                    vm.lists = response.data.data;
                })

            axios({
                method: 'post',
                url: '/stu/getMeet',
            })
            .then((response) => {
                console.log(response.data.data)
                vm.message = response.data.data
                vm.messageLength = vm.message.length
            })
        },
    })
</script>

</html>
